<template>
  <PCard
    class="bank-account-page-con"
    :isCardBorder="true"
    :shadow="'never'"
    :isHeadBottomBorder="true"
    :bodyStyle="{ width: '100%' }"
  >
    <div slot="header" class="card-title" v-if="!isOutsideData">
      <span>银行开户</span>
      <div style="float: right">
        <a-button @click="goBack" type="primary" style="float: right">返 回</a-button>
      </div>
    </div>
    <div class="bank-account-page-body">
      <div class="page-body-item" v-if="!isOutsideData">企业名称: {{ entName }}</div>
      <div class="page-body-item">
        <div class="title">请选择开户行</div>
        <div class="body">
          <a-row type="flex">
            <a-col :span="3"> </a-col>
            <a-col :span="7"> 上海浦东发展银行<br />（荆州地区） </a-col>
            <a-col :span="7"> 招商银行<br />（武汉地区）</a-col>
            <a-col :span="7"> 平安银行<br />（北京地区） </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="3"> 资料</a-col>
            <a-col :span="7"> <colBox :rowKey="'资料'" :colKey="'上海浦东发展银行'"></colBox></a-col>
            <a-col :span="7"> <colBox :rowKey="'资料'" :colKey="'招商银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'资料'" :colKey="'平安银行'"></colBox> </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="3"> 转款额度 </a-col>
            <a-col :span="7"> <colBox :rowKey="'转款额度'" :colKey="'上海浦东发展银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'转款额度'" :colKey="'招商银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'转款额度'" :colKey="'平安银行'"></colBox> </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="3"> 手续费 </a-col>
            <a-col :span="7"> <colBox :rowKey="'手续费'" :colKey="'上海浦东发展银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'手续费'" :colKey="'招商银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'手续费'" :colKey="'平安银行'"></colBox> </a-col>
          </a-row>
          <a-row type="flex">
            <a-col :span="3"> TIPS </a-col>
            <a-col :span="7"> <colBox :rowKey="'TIPS'" :colKey="'上海浦东发展银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'TIPS'" :colKey="'招商银行'"></colBox> </a-col>
            <a-col :span="7"> <colBox :rowKey="'TIPS'" :colKey="'平安银行'"></colBox> </a-col>
          </a-row>
          <a-row type="flex">
            <a-radio-group v-model="value" @change="onChange" style="width: 100%">
              <a-col :span="3"> 1 col-order-4 </a-col>
              <a-col :span="7"> <a-radio :value="1">选择</a-radio> </a-col>
              <a-col :span="7"> <a-radio :value="3">选择</a-radio></a-col>
              <a-col :span="7"> <a-radio :value="5">选择</a-radio> </a-col>
            </a-radio-group>
          </a-row>
        </div>
      </div>

      <!-- 注意事项及常见问题 -->
      <div class="page-body-item">
        <colBox :rowKey="'QA'" :colKey="'问答'"></colBox>
      </div>

      <div class="page-body-item" v-if="showPeopleInfo">
        <div class="title">请填写网银管理员信息</div>
        <div class="body not-border">
          <div class="form-con">
            <a-form v-bind="formItemLayout" :form="form">
              <!-- <a-form-item label="财务姓名：">
                <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入财务姓名!' }] }]" />
              </a-form-item>
              <a-form-item label="身份证号：">
                <a-input
                  v-decorator="[
                    'cardNum',
                    {
                      rules: [
                        { required: true, message: '请输入身份证号!' },
                        {
                          validator: (rule, value, callback) => {
                            handleCardNum(rule, value, callback)
                          },
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
              <a-form-item label="财务实名手机号：">
                <a-input
                  v-decorator="[
                    'phoneNumber',
                    {
                      rules: [
                        { required: true, message: '请输入财务实名手机号！' },
                        {
                          validator: (rule, value, callback) => {
                            handlePhoneCheck(rule, value, callback)
                          },
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item> -->

              <a-form-item label="网银管理员：">
                <p-UpLoadFile ref="UpLoadFileID" :config="updataFileConfig" v-model="UpLoadFileArr" :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>
              </a-form-item>
              <!-- <div class="ant-row ant-form-item" style="color: #C2C2C2;font-size: 14px;width: 100%;text-align: end;">
                上传身份证证件照：请上传法人有效身份证信息。支持jpg、png格式大小不超过3M
              </div> -->

              <a-form-item label="实名手机号：">
                <a-input
                  v-decorator="[
                    'phoneNumber',
                    {
                      rules: [
                        { required: true, message: '请输入实名手机号！' },
                        {
                          validator: (rule, value, callback) => {
                            handlePhoneCheck(rule, value, callback)
                          },
                        },
                      ],
                    },
                  ]"
                />
              </a-form-item>
            </a-form>
          </div>
        </div>
      </div>
      <div class="page-body-item btn" v-if="!isOutsideData">
        <a-button type="primary" block @click="handleSubmit">提交业务申请</a-button>
      </div>
    </div>
  </PCard>
</template>

<script>
import getDataForDB from '@/api/qsbserviceEnterprise'
import { getVerifyOcrIDCard } from '@api/api'
import colBox from './component/colBox.vue'
const typeList_ = {
  // 1: '上海浦东发展银行（荆州分行营业部）',
  // 2: '中国邮政储蓄银行（荆州分行营业部）',
  // 3: '招商银行（荆州分行营业部）',
  // 4: '浙江网商银行',
  1: '上海浦东发展银行（荆州地区）',
  3: '招商银行（武汉地区）',
  5: '平安银行（北京地区）',
}

const updataFileConfig = {
  readonly: false, // 用于标记是否是可编辑的 此参数可选   默认值 false 表示可编辑   true 表示只读，不可编辑
  dir: '/qsb/idCard/', // 上传文件的地址
  required: true, // 文件上传必填校验 默认为false 不校验   当值为true时进行强制校验
  showCardList: ['card1', 'card2'],
  upLoadCardListConfig: [
    { type: '1', tips: '身份证人像面', fileInfo: { name: '', url: '' } },
    { type: '1', tips: '身份证国徽面', fileInfo: { name: '', url: '' } },
    // { type: '1', tips: '测试', fileInfo: { name: '', url: '' } },
  ], // 此项最多可以传两组值 {type:'1',tips:'身份证人像面',backgroundPic:''},
  fielConfig: {
    type: '图片', // 允许上传的文件类型 当为空时表示不限制  默认为空   可供选择类型： 图片  文档  压缩包  发票
    size: 10, // 允许上传的文件个数  默认值为1
    singleFileSize: 100, //上传的单个文件大小 单位为 MB  默认值为1
  },
}


const getUploadConfig = ()=>{
  const temp = {
    dir: "/qsb/idCard/",
      // 证  all  ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
    model: "身份证",
    // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
    showBG: true,
    // 此参数选填  表示是否可编辑
    readonly: false,
    // 提示信息
    tips:{
      card1: '请上传身份证正面',
      card2: '请上传身份证反面',
    },
    // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
    // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
    // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
    required: true,
    // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
    defaultFileList: {
      card1: {}, // {name:'',url:''}
      card2: {},// {name:'',url:''}
    },
    // 此参数集必填
    fielConfig: {
      // 允许上传的文件类型 当为空时表示不限制  默认为空
      //    可供选择类型：
      //          图片('jpg', 'png', 'jpeg')
      //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
      //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
      //          PDF(pdf)
      //          委托代征协议('pdf','jpg', 'png', 'jpeg')
      //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
      // eg:
      //    当值为string类型时，对所有（card1,card2,card3）的有效；
      //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
      type: "图片",
      // 允许上传的文件个数  默认值为1
      // eg: 1 表示只允许上传1个文件；
      //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
      size: 1,
      // 上传的单个文件大小 单位为 MB  默认值为1
      //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
              // 当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
      singleFileSize: 5,
    },
  }
  return temp
}

export default {
  name: 'BankAccount',
  props: {
    isOutside: { type: Boolean },
  },
  components: { colBox },
  data() {
    return {
      UpLoadFileArr: {},
      updataFileConfig:getUploadConfig(),
      ocrInfo:{},
      isOutsideData: false,
      typeList: typeList_,
      entName: '',
      entId: '',
      value: 0,
      showPeopleInfo: true,
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      form: this.$form.createForm(this, { name: 'coordinated' }),
      formItemLayout: {
        labelCol: {
          xs: { span: 5 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 10 },
          sm: { span: 10 },
        },
      },
      config: {
        rules: [{ type: 'object', required: true, message: 'Please select time!' }],
      },
      rangeConfig: {
        rules: [{ type: 'array', required: true, message: 'Please select time!' }],
      },
    }
  },
  watch: {
    isOutside: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Boolean]') {
          this.isOutsideData = val
        }
      },
      deep: true,
      immediate: true,
    },
    UpLoadFileArr: {
      handler(val) {
        if (Object.prototype.toString.call(val) === '[object Object]') {
          const { card1, card2 } = val
          if (card1&&card2&&card1.url && card2.url) {
            this.getBusinessLicenseOcrFun(card1.url, card2.url)
          }
        }
      },
      deep: true,
      immediate: true,
    },
  },

  mounted() {
    const { entName, bizId } = this.$route.query
    if (entName && bizId) {
      this.entName = entName
      this.entId = bizId
      this.isOutsideData = false
    } else {
      this.isOutsideData = true
    }
    // console.log('开户行 BankAccount==》', this, this.$route.query);
  },
  methods: {
    /**
     * ocr识别
     * @param {*} cardFrontUrl 身份证正面
     * @param {*} cardBackUrl 身份证反面
     */
    getBusinessLicenseOcrFun(cardFrontUrl, cardBackUrl) {
      const param = { cardFrontUrl, cardBackUrl }
      getVerifyOcrIDCard(param).then((res) => {
        console.log('识别结果======》',res);
        if(res.success){
          this.ocrInfo = res.result
        }else{
          this.$message.warning('身份证解析失败，请更换后重试！')
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    },
    handlePhoneCheck(rule, value, callback) {
      let reg = /^(1\d{10})$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确手机号'))
      } else {
        callback()
      }
    },
    handleCardNum(rule, value, callback) {
      var reg =
        /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/
      if (!reg.test(value)) {
        callback(new Error('请输入正确身份证号'))
      } else {
        callback()
      }
    },
    onChange(e) {
      const radioNum = e.target.value
      console.log('radio checked', e.target.value)
      if (radioNum === 4) {
        this.showPeopleInfo = false
      } else {
        this.showPeopleInfo = true
      }
    },
    /**
     * 获取页面数据  外部使用
     */
    getParam() {
      let isPass = true
      if (this.value == 0) {
        this.$message.warning('请选择开户行')
        isPass = false
        return { isPass, verificationForm: false, param: null }
      }
      // const checkRes = this.$refs.UpLoadFileID.getDataCheckRes()
      const checkRes =  this.$refs['UpLoadFileID'].getDataCheckRes({card1:'请上传身份证正面',card2:'请上传身份证反面'})
      console.log('checkRes======>',checkRes);
      if (Object.keys(this.ocrInfo).length==0 || JSON.stringify(checkRes).indexOf('false')>=0) {
        this.$message.warning('需要上传网银管理员的身份证')
        isPass = false
        return { isPass, verificationForm: false, param: null }
      }
      const {card1, card2} = this.UpLoadFileArr
      const param = {
        cardBackUrl:card2.url,
        cardFrontUrl:card1.url,
        bankName: this.typeList[this.value],
        openType: this.value,
        cardNo: this.ocrInfo.idcardNum,
        entId: this.entId,
        financialName: this.ocrInfo.realName,
        phone: '',
        ...this.ocrInfo
      }
      let res = false
      if (this.value !== 4) {
        this.form.validateFields((err, values) => {
          if (!err ) {
            res = true
            // console.log('Received values of form: ', values);
            // param.cardNo = values.cardNum
            // param.financialName = values.name
            param.phone = values.phoneNumber
            isPass = true
          } else {
            isPass = false
          }
        })
      } else {
        // 不需要校验表单
        res = true
      }
      return { isPass, verificationForm: res, param }
    },

    handleSubmit() {
      // console.log('提交===》',this.value);
      const res = this.getParam()
      if (!res.isPass) {
        return false
      }
      console.log('提交数据===》',res);
      if (res.verificationForm) {
        // 跳转到 企业详情-已设立
        getDataForDB('创建银行开户', res.param).then((res) => {
          // console.log('创建银行开户 ====>', res, param);
          if (res.code == 200) {
            this.$message.success('创建成功')
            this.$router.push({
              path: '/enterprise/enterpriseList/enterpriseDetails1',
              query: {
                bizId: this.entId, // '209218'
              },
            })
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
  },
}
</script>

<style lang="less">
.bank-account-page-con {
  .card-title {
    font-size: 28px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }

  // .card-body {
  //   padding: 5px 20px 20px 20px;
  // }
  .bank-account-page-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;

    .page-body-item {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: column;
      padding: 20px;
      margin: 10px 0;

      &.btn {
        padding: 10px 35%;
      }

      .title {
        font-size: 20px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #333333;
        line-height: 28px;
        padding: 10px 0;
      }

      .body {
        width: 100%;
        // padding: 10px 15px;
        border-radius: 2px;
        border: 1px solid #cccccc;
        &.not-border{
          border: 0px solid #cccccc;
        }
        .ant-row-flex {
          border-bottom: 1px solid #cccccc;
          .ant-col {
            border-right: 1px solid #cccccc;
            text-align: center;
            vertical-align: middle;
          }
          .ant-col:last-child {
            border-right: 0px solid #cccccc;
          }
          .ant-col:first-child {
            background: #4167e8;
            color: #ffffff;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
        .ant-row-flex:first-child {
          .ant-col:first-child {
            background: #ffffff;
          }
        }
        .ant-row-flex:last-child {
          border-bottom: 0px solid #cccccc;
          height: 80px;
          .ant-col {
            height: 100%;
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .card-grid-cont {
          width: 100%;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          line-height: 23px;
          display: flex;
          justify-content: flex-start;
          align-items: center;

          &.h1 {
            height: 50px;
            justify-content: center;
          }

          &.h2 {
            height: 280px;
            overflow: auto;
            align-items: flex-start;
          }

          &.h3 {
            height: 200px;
          }

          &.backColor {
            background-color: #4167e8;
            color: #ffffff;
            justify-content: center;
          }
        }

        .form-con {
          width: 50%;
        }
      }
    }
  }
}
</style>
